<html>
    <head>
        <meta http-equiv="Content-Type" charset="UTF-8"/>

        <!-- 网页调试 vConsole -->
        <script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="nativeBus.js"></script> <!-- 引用nativeBus.js -->
        <script type="text/javascript">
        eruda.init();
            //安卓调用此方法，不传参
            function javacalljs(){
                 document.getElementById("showmsg").innerHTML = "android invoked JS method";
            }
            //安卓调用此方法，并传参，参数显示在H5中
            function javacalljswith(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }
            //安卓调用此方法，传参，并要求H5返回结果，返回结果这里简单处理，直接调用安卓的统一方法getTitleSuccess，理论上来说应该调用参数中传过来的方法
            function javacalljswithcallback(arg){
                var objStr = JSON.stringify(arg);
                 document.getElementById("showmsg").innerHTML = (objStr);

                 window.android.getTitleSuccess(' I am title');
            }


<!--        js调用安卓传参，并获取返回结果-->
            var fName = "getUserInfo";
            var fai = "getUserInfoFail";
            function getUserInfo(){
                var obj = {
                    functionName:fName,
                    parameter:"1",
                    callback:"getUserInfoSuccess",
                    fail:fai
                };
                var objStr = JSON.stringify(obj);
                window.getParams.taiYYNative(objStr)
            }
           function getUserInfoSuccess(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }
           function getUserInfoFail(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }

<!--        Js 通过nativeBus传参获取token，安卓通过nativeBus传过去的callback返回token-->
           function getDeviceToken(){
              window.tyyNativeBus({
                serviceName: 'getDeviceToken',//服务名称
                success: function (res) {
                  var token = res
                   document.getElementById("showmsg").innerHTML = (token);
                  console.log('tlxToken=', res)
                  return res
                },//成功回调
                fail: function (error) {
                },//失败回调
                timeout: 0,//0为不设置超时时间
                data: ''//传参
              })
            }
<!--       Js 通过nativeBus传参获取定位，安卓没用通过callback返回结果，而是另外定义了常规方法receivePosition返回定位信息，这里success就不会被回调-->
           function getPosition(){
              window.tyyNativeBus({
                serviceName: 'getPosition',//服务名称
                success: function (res) {
                  var token = res
                   document.getElementById("showmsg").innerHTML = (token);
                  console.log('tlxToken=', res)
                  return res
                },//成功回调
                fail: function (error) {
                },//失败回调
                timeout: 0,//0为不设置超时时间
                data: ''//传参
              })
            }

           function receivePosition(arg){
                 document.getElementById("showmsg").innerHTML = ("receivePosition" + arg);
           }


        //网络请求案例
        $(document).ready(function() {
            $("#myButton").click(function() {
                $.ajax({
                    url: "https://api.kekc.cn/api/yien", // 替换为你的 API 地址
                    type: "GET",
                    success: function(data) {
                        // 处理返回的数据
                        console.log(data);
                        document.getElementById("msg").innerHTML = (data.cn);
                        // 你可以在这里更新页面上的某些元素
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // 处理错误
                        console.error("Error: " + textStatus, errorThrown);
                    }
                });
            });


        });
    </script>
</head>

        <h3>Web界面</h3>

        <h3 id="showmsg">the result that android called JS</h3>
<!--        js 调用安卓不传参-->
        <input type="button" value="Js 直接调用Android方法" onclick="window.android.jsCallAndroid()"/>
        <br/><br/>
<!--        js调用安卓传参，安卓获取参数后显示-->
        <input type="button" value="Js 直接调用安卓方法并传参" onclick="window.android.jsCallAndroidArgs('the params given by JS')"/>
        <br/><br/>
<!--        js调用安卓传参，并获取返回结果-->
        <input type="button" value="Js 直接调用安卓方法获取用户信息，安卓返回用户信息" onclick="getUserInfo()"/>
         <br/><br/>
<!--        js通过nativeBus调用安卓传参，并获取返回结果-->
        <input type="button" value="Js 通过nativeBus传参获取token，安卓通过nativeBus返回token" onclick="getDeviceToken()"/>
    <br/><br/>
<!--        js通过nativeBus调用安卓传参，并获取返回结果-->
        <input type="button" value="Js 通过nativeBus传参获取定位，安卓常规方法返回定位信息" onclick="getPosition()"/>
        <br/><br/>
        <br/><br/>
        <button id="myButton">H5网络测试get请求，获取诗句</button>
        <h3 id="msg">诗句显示处</h3>

    </body>
</html>